<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="../static/images/loge.jpg">
    <title>智能医疗小助手</title>
    <style>
        body, html {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

		margin: 0;
		padding: 0;
	}
	#background {
		position: fixed;
		top: 0;
		left: 0;

		z-index: -100;
	}
        /* 设置全局超链接的颜色 */
        a {
            color: red; /* 红色 */
        }
        a:hover {
            color: darkred; /* 悬停时更深 */
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            /*background-image: url('../static/images/bg3.jpg'); /* New background image */
            background-size: cover;
        }

        .header {
            background-image: url('../static/images/R.jpg');
            background-color: #333;
            color: #fff;
            padding: 10px 20px;
            text-align: center;
        }

        .nav {
            background-color: #00b2ee;
            padding: 10px;
            text-align: center;
        }

        .nav a {
            color: #fff;
            text-decoration: none;
            padding: 10px;
        }

        .nav a:hover {
            background-color: #777;
        }

        .chat-container {
            background-image: url('../static/images/background_pattern.png');
            background-size: cover;
            padding: 10px;
            width: 1300px;
            margin: 15px auto;
            border-radius: 10px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        }

        .message-container {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
            animation: fadeIn 0.5s ease-in-out;
        }

        .message-container.user {
            flex-direction: row-reverse;
            align-items: flex-start;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .user-avatar, .robot-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin: 0 10px;
        }

        .user-avatar {
            margin-left: 10px;
        }

        .robot-avatar {
            margin-right: 10px;
        }

        .user-message, .robot-message {
            padding: 15px;
            margin: 5px;
            border-radius: 5px;
        }

        .user-message {
            background-color: #b3ffb3; /* 绿色背景 */
            text-align: right;
        }

        .robot-message {
            background-color: #b3d9ff; /* 蓝色背景 */
            text-align: left;
        }

        #message-box {
            height: 700px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        #user-input {
            width: calc(100% - 90px);
            padding: 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-right: 10px;
        }

        #user-input:focus {
            outline: none;
            border-color: #666;
            font-size: 16px;
        }

        #submit-btn {
            background-color: #4caf50;
            color: #fff;
            border: none;
            padding: 20px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        #submit-btn:hover {
            background-color: #45a049;
        }

        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4);
        }

        .popup-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        @keyframes animatetop {
            from {top: -300px; opacity: 0}
            to {top: 0; opacity: 1}
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas id="background"></canvas>
    <div class="header">
        <h1>智能医疗小助手</h1>
    </div>
    <div class="nav">
        <a href="http://127.0.0.1:5000">返回主页</a>
        <a href="http://localhost:7474/browser/">登录数据库</a>
        <a href="http://127.0.0.1:5000/view">可视化界面</a>
        <a href="#" onclick="showPopup('about')">关于</a>
        <a href="#" onclick="showPopup('contact')">联系我们</a>
    </div>

    <div class="chat-container">
        <div id="message-box">
            <!-- 聊天内容将在这里显示 -->
        </div>
        <form id="message-form" onsubmit="sendMessage(event)">
            <input type="text" id="user-input" placeholder="请输入您的问题...">
            <button type="submit" id="submit-btn">发送</button>
        </form>
    </div>

    <!-- 弹窗内容 -->
    <div id="about" class="popup">
        <div class="popup-content">
            <span class="close" onclick="closePopup('about')">&times;</span>
           <p>
当你面对健康问题时，有时候需要更多的信息，而不仅仅是简单的答案。我们的智能医疗问答网站旨在为您提供更全面、更个性化的帮助。我们的网站基于知识图谱技术，这意味着我们不仅仅是匹配关键词，而是理解您的问题并基于医学知识图谱来提供答案。</p>

<p>探索健康，从这里开始</p>

<p><strong>个性化建议</strong><br>
无论您是在寻找健康建议、了解疾病、还是探索治疗方法，我们都可以为您提供个性化的建议。我们的算法会根据您的输入和医学知识图谱中的信息，为您推荐最相关和最可信的答案。</p>

<p><strong>深入了解</strong><br>
我们不仅提供简单的答案，还会为您提供更深入的信息。您可以探索与您的健康问题相关的医学概念、疾病、症状、治疗方法等。无论您是一个医学专业人士还是一位普通用户，我们都有适合您的信息。</p>

<p><strong>可信赖的来源</strong><br>
我们的答案和信息来自于可信赖的医学数据库和权威来源。我们致力于为您提供最准确、最新的医学信息，以便您做出明智的健康决策。</p>

<p><strong>全面的服务</strong><br>
除了问答功能外，我们还会根据您所提出的问题识别关键词，并为您通过可视化服务。</p>

<p><strong>开始您的健康之旅</strong><br>

<p>无论您是在寻找答案，还是对健康问题感到困惑，我们都在这里为您提供支持。开始您的健康之旅，探索医学世界的奥秘，让我们帮助您做出更明智的健康决策。</p>

        </div>
    </div>

    <div id="contact" class="popup">
        <div class="popup-content">
            <span class="close" onclick="closePopup('contact')">&times;</span>
            <p>联系邮箱：1793647848@qq.com</p>
        </div>
    </div>

    <script>
        window.onload = function() {
            var messageBox = document.getElementById('message-box');
            var robotContainer = document.createElement('div');
            robotContainer.className = 'message-container robot'; // 添加 'robot' 类
            var robotAvatar = document.createElement('img');
            robotAvatar.src = '../static/images/doctor.jpg';
            robotAvatar.className = 'robot-avatar';
            var robotMessageElement = document.createElement('div');
            robotMessageElement.className = 'robot-message';
            robotMessageElement.textContent = '这里是智能医疗小助手，请问有什么可以帮到您的。';
            robotContainer.appendChild(robotAvatar);
            robotContainer.appendChild(robotMessageElement);
            messageBox.appendChild(robotContainer);
        }

        function sendMessage(event) {
            event.preventDefault();
            var userInput = document.getElementById('user-input');
            var userMessage = userInput.value.trim();

            if (userMessage === '') return;

            var messageBox = document.getElementById('message-box');

            // 用户发送消息
            var userContainer = document.createElement('div');
            userContainer.className = 'message-container user'; // 添加 'user' 类
            var userAvatar = document.createElement('img');
            userAvatar.src = '../static/images/user.jpg';
            userAvatar.className = 'user-avatar';

            var userMessageElement = document.createElement('div');
            userMessageElement.className = 'user-message';
            userMessageElement.textContent = userMessage;

            userContainer.appendChild(userAvatar);
            userContainer.appendChild(userMessageElement);
            messageBox.appendChild(userContainer);

            // 清空输入框
            userInput.value = '';

            // 发送请求到后端
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/ask', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function() {
                if (xhr.status === 200) {
                    var responseData = JSON.parse(xhr.responseText);
                    var robotMessage = responseData['robot_message'];

                    // 显示机器人消息，并确保超链接显示为红色
                    var robotContainer = document.createElement('div');
                    robotContainer.className = 'message-container robot'; // 添加 'robot' 类
                    var robotAvatar = document.createElement('img');
                    robotAvatar.src = '../static/images/doctor.jpg';
                    robotAvatar.className = 'robot-avatar';

                    var robotMessageElement = document.createElement('div');
                    robotMessageElement.className = 'robot-message';
                    robotMessageElement.innerHTML = robotMessage; // 内含超链接

                    robotContainer.appendChild(robotAvatar);
                    robotContainer.appendChild(robotMessageElement);
                    messageBox.appendChild(robotContainer);

                    // 滚动到消息框底部
                    messageBox.scrollTop = messageBox.scrollHeight;
                } else {
                    console.error("Error with the request:", xhr.status);
                }
            };

            xhr.send('user_message=' + encodeURIComponent(userMessage));
        }

        // JavaScript函数：显示弹窗
        function showPopup(popupId) {
            var popup = document.getElementById(popupId);
            popup.style.display = "block";
        }

        // JavaScript函数：关闭弹窗
        function closePopup(popupId) {
            var popup = document.getElementById(popupId);
            popup.style.display = "none";
        }
window.addEventListener("load", function() {
	var ctx = document.getElementById('background').getContext('2d');
	//gradient
	var options =
	{
		resolution: 1,
		gradient:
		{
			resolution: 4,
			smallRadius: 0,
			hue:
			{
				min: 0,
				max: 360
			},
			saturation:
			{
				min: 40,
				max: 80
			},
			lightness:
			{
				min: 25,
				max: 35
			}
		},
		bokeh:
		{
			count: 30,
			size:
			{
				min: 0.1,
				max: 0.3
			},
			alpha:
			{
				min: 0.05,
				max: 0.4
			},
			jitter:
			{
				x: 0.3,
				y: 0.3
			}
		},
		speed:
		{
			min: 0.0001,
			max: 0.001
		},
		debug:
		{
			strokeBokeh: false,
			showFps: false
		}
	};
	var mobile =
	{
		force: false,
		resolution: 0.5,
		bokeh:
		{
			count: 6
		}
	};
	//buffers
	var gradientBuffer = document.createElement('canvas').getContext('2d');
	var circleBuffer = document.createElement('canvas').getContext('2d');
	//render time, fps calculations, debug
	var time;
	var targetFps = 60; //not actual fps, but updates per second
	var curFps = 0;
	var cntFps = 0;
	var fps = 0;
	var w = 0;
	var h = 0;
	var scale = 0;
	//constants for faster calcs
	var pi2 = Math.PI * 2;
	//util functions
	function lerp(a, b, step) {
		return step * (b - a) + a;
	}
	function clamp(a) {
		if (a < 0) return 0;
		if (a > 1) return 1;
		return a;
	}
	function rand(obj) {
		return Math.random() * (obj.max - obj.min) + obj.min;
	}
	function newColor() {
		return new Color(
				rand(options.gradient.hue),
				rand(options.gradient.saturation),
				rand(options.gradient.lightness)
				);
	}

	function isMobile() {
		return (
				mobile.force
				|| navigator.userAgent.match(/Android/i)
				|| navigator.userAgent.match(/webOS/i)
				|| navigator.userAgent.match(/iPhone/i)
				|| navigator.userAgent.match(/iPad/i)
				|| navigator.userAgent.match(/iPod/i)
				|| navigator.userAgent.match(/BlackBerry/i)
				|| navigator.userAgent.match(/Windows Phone/i)
			   );
	}

	window.requestAnimFrame = (function(callback) {
		if (isMobile())
			return function(callback) {
				window.setTimeout(callback, 1000 / 10);
			};
		return window.requestAnimationFrame || window.webkitRequestAnimationFrame
			|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame
			|| window.msRequestAnimationFrame || function(callback) {
				window.setTimeout(callback, 1000 / 60);
			};
	})();

	//classes
	function Color(h, s, l) {
		this.h = h;
		this.s = s;
		this.l = l;

		this.str = function() {
			return this.h + ", " + this.s + "%, " + this.l +"%";
		}
	}
	function ColorPoint(x, y, color) {
		this.x = x;
		this.y = y;
		this.oldColor = color;
		this.newColor = color;
		this.step = 0;
		this.speed = 0;

		this.color = function() {
			return new Color(lerp(this.oldColor.h, this.newColor.h, this.step),
					lerp(this.oldColor.s, this.newColor.s, this.step),
					lerp(this.oldColor.l, this.newColor.l, this.step));
		}

	}
	var colorPoints = [
		new ColorPoint(0, 0, new Color(196, 59, 34)),
		new ColorPoint(0, 1, new Color(269, 79, 32)),
		new ColorPoint(1, 0, new Color(30, 42, 33)),
		new ColorPoint(1, 1, new Color(304, 47, 27))
	];

	function BokehCircle(x, y, size, alpha) {
		this.oldX = x;
		this.oldY = y;
		this.oldSize = size;
		this.oldAlpha = alpha;
		this.newX = 0;
		this.newY = 0;
		this.newAlpha = 0;
		this.newSize = 0;
		this.step = 0;
		this.speed = 0;

		this.x = function() {
			return lerp(this.oldX, this.newX, this.step);
		}
		this.y = function() {
			return lerp(this.oldY, this.newY, this.step);
		}
		this.alpha = function() {
			return lerp(this.oldAlpha, this.newAlpha, this.step);
		}
		this.size = function() {
			return lerp(this.oldSize, this.newSize, this.step);
		}
	}
	var circles = [];

	function setJitter(circle) {
		circle.newX = clamp(circle.oldX + rand({
			min: -options.bokeh.jitter.x,
			max: options.bokeh.jitter.x
		}));
		circle.newY = clamp(circle.oldY + rand({
			min: -options.bokeh.jitter.y,
			max: options.bokeh.jitter.y
		}));
	}
	function resize() {
		var width = window.innerWidth;
		var height = window.innerHeight;

		w = width * options.resolution;
		h = height * options.resolution;
		scale = Math.sqrt(w * h);

		//actual canvas
		ctx.canvas.width = width;
		ctx.canvas.height = height;
		ctx.scale(1 / options.resolution, 1 / options.resolution);

		//circle canvas
		var circleSize = options.bokeh.size.max * scale;
		circleBuffer.canvas.width = circleSize * 2 + 1;
		circleBuffer.canvas.height = circleSize * 2 + 1;

		circleBuffer.fillStyle = "rgb(255, 255, 255)";
		circleBuffer.beginPath();
		circleBuffer.arc(circleSize, circleSize, circleSize, 0, pi2);
		circleBuffer.closePath();
		circleBuffer.fill();

		//force render on mobile
		if (isMobile())
			render();
	}
	function softCopy(src, dest)
	{
		var i = 0;

		for (var property in src)
		{
			if (dest.hasOwnProperty(property))
				if (softCopy(src[property], dest[property]) == 0)
					dest[property] = src[property];
			i++;
		}
		return i;
	}
	function init() {
		gradientBuffer.canvas.height = options.gradient.resolution;
		gradientBuffer.canvas.width = options.gradient.resolution;

		if (isMobile())
			softCopy(mobile, options);

		resize();

		colorPoints.forEach(function(point) {
			point.oldColor = newColor();
			point.newColor = newColor()
				point.speed = rand(options.speed);
		});

		for(i = 0; i < options.bokeh.count; i++) {
			circles.push(new BokehCircle(Math.random(), Math.random(),
						rand(options.bokeh.size), rand(options.bokeh.alpha)));
			circles[i].newAlpha = rand(options.bokeh.alpha);
			circles[i].newSize = rand(options.bokeh.size);
			circles[i].speed = rand(options.speed);
			setJitter(circles[i]);
		}
	}
	function iterate() {
		var now = Date.now();
		curFps += (now - (time || now));
		cntFps++;
		var delta = (now - (time || now)) / (1000 / targetFps);
		time = now;

		if(curFps > 1000) {
			fps = 1000 / (curFps / cntFps);
			curFps -= 1000;
			cntFps = 0;
		}

		colorPoints.forEach(function(point) {
			point.step += point.speed * delta;

			if (point.step >= 1) {
				point.step = 0;

				point.oldColor = point.newColor;

				point.newColor = newColor();
				point.speed = rand(options.speed);
			}
		});

		circles.forEach(function(circle) {
			circle.step += circle.speed * delta;
			if(circle.step >= 1) {
				circle.step = 0;

				circle.oldX = circle.newX;
				circle.oldY = circle.newY;
				circle.oldAlpha = circle.newAlpha;
				circle.oldSize = circle.newSize;

				setJitter(circle);
				circle.newAlpha = rand(options.bokeh.alpha);
				circle.newSize = rand(options.bokeh.size);
				circle.speed = rand(options.speed);
			}
		});
	}

	function render() {
		iterate();

		//draw point gradient to buffer
		colorPoints.forEach(function(point) {
			var x = point.x * options.gradient.resolution;
			var y = point.y * options.gradient.resolution;
			var grad = gradientBuffer.createRadialGradient(x, y,
					options.gradient.smallRadius, x, y,
					options.gradient.resolution);
			grad.addColorStop(0, 'hsla(' + point.color().str() + ', 255)');
			grad.addColorStop(1, 'hsla(' + point.color().str() + ', 0)');

			gradientBuffer.fillStyle = grad;
			gradientBuffer.fillRect(0, 0,
					options.gradient.resolution, options.gradient.resolution);
		});

		//draw gradient from memory
		ctx.globalCompositeOperation = "source-over";
		ctx.drawImage(gradientBuffer.canvas, 0, 0, w, h);

		//draw bokeh
		ctx.globalCompositeOperation = "overlay";
		if (options.debug.strokeBokeh)
			ctx.strokeStyle = "yellow";

		circles.forEach(function(circle) {
			var size = circle.size() * scale;

			ctx.globalAlpha = circle.alpha();
			ctx.drawImage(circleBuffer.canvas,
					circle.x() * w - size / 2, circle.y() * h - size / 2,
					size, size);

			if(options.debug.strokeBokeh) {
				ctx.globalAlpha = 1;
				ctx.globalCompositeOperation = "source-over";
				ctx.strokeRect(circle.x() * w - size / 2,
						circle.y() * h - size / 2, size, size);
				ctx.globalCompositeOperation = "overlay";
			}
		});
		ctx.globalAlpha = 1;

		//debug info
		if (options.debug.showFps) {
			if(fps <= 10) ctx.fillStyle = 'red';
			else ctx.fillStyle = 'yellow';

			ctx.font = "20px sans-serif";
			ctx.fillText(Math.round(fps) + " fps", 10, 20);
		}

		//done rendering, wait for frame
		window.requestAnimFrame(render);
	}

	//does not seem to impact performance
	window.addEventListener("resize", resize);

	window.addEventListener("click", function(e) {
		//console.log(e.targetTouches[0]);
		var width = window.innerWidth;
		var height = window.innerHeight;
		var x = e.clientX/width,
			y = e.clientY/height;
		if(circles.length>50){
			alert("圆圈太多了");
			return;
		}

		circles.push(new BokehCircle(x, y, rand(options.bokeh.size), rand(options.bokeh.alpha)));

		var last = circles.length-1;
		circles[last].newAlpha = rand(options.bokeh.alpha);
		circles[last].newSize = rand(options.bokeh.size);
		circles[last].speed = rand(options.speed);

		circles[last].newX = x;
		circles[last].newY = y;
	})

	//init and render :)
	init();
	render();
});
    </script>

    <footer id="footer">
        <p class="pad-lft">Copyright&#0169; 2024 黄致文  &nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;All Rights Reserved </p>
    </footer>

</body>
</html>
